<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .da {
            display: flex;
        }

        .hezi1 {
            display: flex;
            width: 1000px;
            justify-content: space-around;
            flex-wrap: wrap;


        }

        .hezi2 {
            flex: 1;
            border: 1px solid black;

        }

        .box {
            width: 200px;
            height: 380px;
            border: 3px solid;
            text-align: center;
            margin-bottom: 10px;

        }

        .box img {
            width: 100%;
        }

        .box p:nth-child(2) {
            margin-top: 10px;
        }

        .box p:nth-child(3) {
            margin-top: 10px;
        }

        .box button {
            display: block;
            width: 100px;
            height: 30px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
            margin-top: 10px;
            border: 0;
        }

        .hezi2 .gouwuche {
            font-weight: bold;
            margin: 10px 0;
        }

        .hezi2 .wupin {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }

        .hezi2 .wupin img {
            width: 100px;
            vertical-align: middle;
        }

        .hezi2 .wupin span {
            line-height: 125px;
        }
    </style>
</head>

<body>
    <div class="da">
        <div class="hezi1">
        </div>
        <div class="hezi2">

            <div class="gouwuche">购物车（2）</div>
            <div class="che">
                <!-- <div class="wupin">
                    <input type="checkbox">
                    <img src="img/1.png" alt="">
                    <span>10</span>
                    <span>1</span>
                    <span>删除收藏</span>
                </div>
                <div class="wupin">
                    <input type="checkbox">
                    <img src="img/1.png" alt="">
                    <span>10</span>
                    <span>1</span>
                    <span>删除收藏</span>
                </div> -->
            </div>
        </div>
    </div>
</body>

</html>
<script>
    class Gouwu {
        constructor(el, data) {
            this.data = data
            this.dom = document.querySelector(el)
            // console.log(this.data,this.dom);
            this.oo = { list: [] }
            this.xaunran()
            this.shijian()
        }
        xaunran() {
            var str = this.data.map((item) => {
                return `
            <div class="box">
            <img src="${item.tupian}" alt="">
            <p>${item.mingcheng}</p>
            <p>${item.jiage}</p>
            <button>加入购物车</button>
            </div>
               `
            }).join('')
            this.dom.querySelector('.hezi1').innerHTML = str
        }
        shijian() {
            let list = this.dom.querySelector('.hezi1');
            list.onclick = (e) => {
                if (e.target.tagName == 'BUTTON') {
                    var btns = [...document.querySelectorAll('button')]
                    var index = btns.findIndex((item) => {
                        return item == e.target;
                    })
                    this.oo.list.push(this.data[index])
                }
                this.xaunran2()
            }
        }
        xaunran2() {
            let str2 = this.oo.list.map((item) => {
                console.log(item);
                return `<div class="wupin">
                    <input type="checkbox">
                    <img src="${item.tupian}" alt="">
                    <span>${item.jiage}</span>
                    <span>1</span>
                    <span>删除收藏</span>
                    </div>`
            }).join('')
            this.dom.querySelector('.hezi2 .che').innerHTML = str2
        }

    }
    var arr = [
        { tupian: 'img/1.png', mingcheng: '高级办公椅', jiage: 10000 },
        { tupian: 'img/2.png', mingcheng: '高级按摩椅', jiage: 1000 },
        { tupian: 'img/3.png', mingcheng: '高级电动按摩椅', jiage: 100 },
        { tupian: 'img/4.png', mingcheng: '电动按摩椅', jiage: 10 },
        { tupian: 'img/5.png', mingcheng: '老板椅', jiage: 20000 },
        { tupian: 'img/6.png', mingcheng: '办公桌', jiage: 50000 },
        { tupian: 'img/7.png', mingcheng: '可升降办公椅', jiage: 2000 },
        { tupian: 'img/8.png', mingcheng: '可升降办公桌', jiage: 5000 },
    ]
    var g = new Gouwu('.da', arr)
</script>